<template>
    <div class="main-box">
        <div class="dialog-box">
            <h1 class="title text-center">彻底删除</h1>
            <div>
                <slot></slot>
            </div>
            <div class="button-box">
                <button class="ok fl" @click="ok">确认</button>
                <button class="cancel fr" @click="cancel">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "DialogBox",
    props:{
      title:{
        type:String,
        default:function () {
          return ''
        }
      }
    },
    methods:{
      ok:function () {
        this.$emit('clickOk')
      },
      cancel:function () {
        this.$emit('clickCancel')
      }
    }
  }
</script>

<style scoped>
    .main-box {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .dialog-box {
        margin: calc(50vh - 140px) auto;
        width: 367px;
        height: 185px;
        border-radius: 2px;
        background: white;
    }

    .dialog-box .title {
        background: #F2F4F9;
        height: 46px;
        font-size: 14px;
        color: #333333;
        letter-spacing: 1px;
        line-height: 46px;
    }

    .slot-box {
        height: 80px;
    }

    .button-box{
        width: 220px;
        margin: auto;
    }

    .button-box button{
        border-radius: 2px;
        font-size: 12px;
        height: 30px;
        letter-spacing: 0.86px;
        padding: 0 33px;

    }

    .button-box .cancel{
        border: 1px solid #D8D9E5;
        color: #333333;
    }

    .button-box .ok{
        border: none;
        background: #4690F5;
        color: #ffffff;
    }

</style>
